<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set line styles to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // 1. Draw the particle (mass m)
        const particleX = 110;
        const particleY = 140;
        const particleRadius = 8;
        ctx.beginPath();
        ctx.arc(particleX, particleY, particleRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the label 'm' for the particle
        ctx.fillStyle = 'black';
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("m", particleX - 22, particleY - 5);

        // 3. Draw the velocity vector 'v'
        const arrowStartX = particleX + particleRadius + 5;
        const arrowEndX = 210;
        // Arrow line
        ctx.beginPath();
        ctx.moveTo(arrowStartX, particleY);
        ctx.lineTo(arrowEndX, particleY);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(arrowEndX, particleY);
        ctx.lineTo(arrowEndX - 10, particleY - 5);
        ctx.moveTo(arrowEndX, particleY);
        ctx.lineTo(arrowEndX - 10, particleY + 5);
        ctx.stroke();

        // 4. Draw the label 'v' for velocity
        ctx.font = "italic 20px 'Times New Roman'";
        ctx.fillText("v", arrowEndX - 5, particleY - 12);

        // 5. Draw the rod (mass M)
        ctx.beginPath();
        ctx.moveTo(225, 120); // Top-left
        ctx.lineTo(245, 115); // Top-right
        ctx.lineTo(285, 265); // Bottom-right
        ctx.lineTo(265, 270); // Bottom-left
        ctx.closePath();
        ctx.stroke();
        
        // 6. Draw the label 'M' for the rod
        ctx.font = "20px 'Times New Roman'";
        ctx.fillText("M", 290, 280);

        // 7. Draw the figure caption
        ctx.font = "bold 20px 'Times New Roman'";
        ctx.fillText("Fig. 1.177.", 150, 400);

    </script>
</body>
</html>